<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>关注成长</title>
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport">
    <script type="text/javascript" src="js/vue.js"></script>
    <link rel="stylesheet" href="css/element-ui-index.css"/>
    <script type="text/javascript" src="js/element-ui-index.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <script type="text/javascript" src="js/md5.js"></script>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div id="app" style="width: 100%;">
<template style="width: 100%;">

    <div style="padding: 20px;color: rgb(0 0 0);text-decoration: none;font-size: smaller;">
        <el-button style="color:#3a8ee6;" icon="el-icon-back" circle size="mini" onclick="window.location.href='./list.html'"></el-button>
    </div>

    <div style="text-align: center;font-size: medium;color: #000000;background-color: aliceblue;padding: 12px 0px 12px 0px;margin-top: 0px;">
        {{exam_name}}
    </div>

    <!-- 登记新数据 -->
    <div class="fill-form" style="margin: 36px;">
        <div style="text-align: center;margin: 24px;font-size: x-middle;">成绩登记</div>
        <!-- 登录表单 -->
        <el-form :model="fillForm" :rules="fillFormRules" ref="fillFormRef"  label-width="80px">
            <el-form-item v-for="(item,index) in fillForm.results" 
                :key="index" :label="item.name" 
                :prop="'results.'+index+'.result'" 
                :rules="fillFormRules.result"
            >
                <el-input v-model="item.result" :placeholder="item.name"></el-input>
            </el-form-item>
            <el-row>
                <el-col>
                    <el-button type="primary" :loading="loadingBtn" @click="submitResults" class="el-col-24">
                        <div v-if="!loadingBtn">确认提交</div>
                    </el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>

</template>
</div>
</body>

<script type="text/javascript">
var re = /^[0-9]+.?[0-9]{1,2}?$/;
var  checkGrade = function(rule,value,callback){
    if(!value){
        return callback(new Error('请输入正确的成绩'));
    }else if(!re.test(value)){
        return callback(new Error('请输入正确的成绩'));
    }else if(value<0 || value>150){
        return callback(new Error('请输入正确的成绩'));
    }else{
        callback();
    }
}
new Vue({
    el: '#app',
    data() {
        return {
            token: "",
            exam_id: '1234',
            exam_name: "---",
            //表单对象
            fillForm:{
                results: [
                    { 'cid':1, 'name':"语文", 'result': 0 }
                ]
            },
            loadingBtn: false,

            //表单验证规则
            fillFormRules: {
                //数据登记码的校验规则
                result: [
                    { required: true, trigger: "blur", validator:checkGrade },
                ]
            }
        }
    },
    created() {
        this.token = sessionStorage.getItem("token");
        this.exam_id = sessionStorage.getItem("exam_id");
        this.exam_name = sessionStorage.getItem("exam_name");
        if (!this.token || !this.exam_id || !this.exam_name) {
            top.location.href = "login.html";
            return;
        }
    },
    mounted() {
        this.getExaminationResults();
    },
    methods: {
        async getExaminationResults() {
            var params = {};
            params.token = this.token;
            params.exam_id = this.exam_id;
            this.loading = true;
            //查询详情
            let _this = this;
            axios.post("/api/getExaminationResults", params)
                .then(function (res) {
                    if (res.data.rcode == 0) {
                        _this.loading = false;
                        _this.exam_id = res.data.body.exam_id
                        _this.exam_name = res.data.body.exam_name
                        _this.fillForm.results = res.data.body.details
                    } else {
                        _this.loading = false;
                        return _this.$message.error("系统异常");
                    }
                })
                .catch(function (error) {
                    _this.loading = false;
                    return _this.$message.error("系统异常.");
                });
        },
        async submitResults() {
            this.$refs.fillFormRef.validate(async valid => {
                if (!valid) return this.$message.error("请输入有效的考试成绩");
                var params = {};
                params.token = this.token;
                params.exam_id = this.exam_id;
                params.results = this.fillForm.results;
                this.loadingBtn = true;
                let _this = this;
                axios.post("/api/submitExaminationResults", params)
                    .then(function (res) {
                        if (res.data.rcode == 0) {
                            sessionStorage.clear();
                            sessionStorage.setItem("token", _this.token);
                            window.location.href = "list.html";
                            return;
                        } else {
                            _this.loadingBtn = false;
                            return _this.$message.error("系统异常");
                        }
                    })
                    .catch(function (error) {
                        _this.loadingBtn = false;
                        return _this.$message.error("系统异常");
                    });
            })
        }
    }
})
</script>

</html>
